<template>
    <el-dialog title="通讯录" :visible.sync="isShow" v-if="isShow" top="8vh" width="75%" :close-on-click-modal="false">
        <div class="txl border" style="height: 70vh; display: flex">
            <div class="border" style="width: 200px; padding: 10px">
                <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane class="sel" label="部门" name="department">
                        <div style="height: calc(70vh - 68px); width: 100%; padding: 0 10px; overflow-y: auto">
                            <div :class="select.id === -1 ? 'active text cursor' : 'text cursor'" @click="change({ id: -1, name: '全公司' })">全公司</div>

                            <div :class="select.id === item.id ? 'active text cursor' : 'text cursor'" @click="change(item)" v-for="item in departmentList" :key="item.id">
                                {{ item.name }}
                            </div>
                            <div :class="select.id === 0 ? 'active text cursor' : 'text cursor'" @click="change({ id: 0, name: '待分配' })">待分配</div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane class="sel" label="角色" name="role">
                        <div style="height: calc(70vh - 68px); width: 100%; padding: 0 10px; overflow-y: auto">
                            <div :class="select.id === item.id ? 'active text cursor' : 'text cursor'" @click="change(item)" v-for="item in roleList" :key="item.id">
                                {{ item.name }}
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <div style="flex: 1; height: 100%">
                <div class="border" style="padding: 0 3%; height: 50px; line-height: 50px; font-size: 16px; color: #88e8f2; display: flex; align-items: end; justify-content: space-between">
                    <div>{{ select.name }}</div>
                    <div v-if="operate" style="display: flex">
                        <div @click="deleteDepartment" v-show="activeName === 'department' && select.id > 0" class="cursor">删除部门</div>
                        <div
                            @click="
                                () => {
                                    this.$refs.department.openDialog('add')
                                }
                            "
                            v-show="activeName === 'department'"
                            class="cursor"
                            style="margin-left: 20px"
                        >
                            添加部门
                        </div>
                    </div>
                </div>
                <div style="height: calc(100% - 52px); position: relative">
                    <zy-table :loading="loading" :tableData="userList" :tableColumn="tableColumn" :currentPage="queryForm.page" :pageSize="queryForm.size" :total="total" @changePage="changePage"></zy-table>
                </div>
            </div>
        </div>
        <zy-form ref="department" :dialog="departmentDialog" @add="addDepartment" />
        <zy-form ref="user" :dialog="userDialog" @add="editUser" />
    </el-dialog>
</template>

<script>
import { requestApi } from '@/requset/api'
import zyForm from '@/components/common/zyForm.vue'
import zyTable from '@/components/common/zyTable.vue'
export default {
    components: {
        zyTable,
        zyForm,
    },
    data() {
        return {
            departmentDialog: {
                labelWidth: '80px',
                config: [
                    {
                        name: 'name',
                        type: 'input',
                        label: '部门名称',
                        placeholder: '请输入部门名称',
                        required: true,
                    },
                ],
                form: {
                    name: '',
                },
                title: '添加部门',
            },
            userDialog: {
                labelWidth: '80px',
                config: [
                    {
                        name: 'department_id',
                        type: 'select',
                        label: '部门',
                        placeholder: '请选择部门',
                        options: [],
                    },
                    {
                        name: 'role_id',
                        type: 'select',
                        label: '角色',
                        placeholder: '请选择角色',
                        options: [],
                    },
                    {
                        name: 'phonenumber',
                        type: 'input',
                        placeholder: '请输入手机号',
                        label: '手机号',
                    },
                ],
                form: {},
                title: '编辑用户',
            },
            isShow: false,
            activeName: 'department',
            userList: [],
            roleList: [],
            select: {
                id: -1,
                name: '全公司',
            },
            loading: false,
            tableColumn: [
                {
                    title: '操作',
                    name: 'action',
                    buttons: [
                        {
                            text: '编辑',
                            click: (val) => {
                                this.userDialog.form = {
                                    id: val.id,
                                    department_id: val.department_id,
                                    role_id: val.role_id,
                                    phonenumber: val.phonenumber,
                                }
                                this.$refs.user.openDialog('add')
                            },
                        },
                    ],
                    if: parseInt(sessionStorage.getItem('role_id')) === 1,
                },
                {
                    label: '姓名',
                    name: 'nick_name',
                },
                {
                    label: '手机',
                    name: 'phonenumber',
                },
                {
                    label: '部门',
                    name: 'department_name',
                },
                {
                    label: '角色',
                    name: 'role_name',
                },
            ],
            queryForm: {
                size: 20,
                page: 1,
            },
            total: 0,
            selectList: [],
            departmentList: [],
        }
    },
    computed: {
        operate() {
            return parseInt(sessionStorage.getItem('role_id')) === 1
        },
    },
    methods: {
        deleteDepartment(data) {
            this.$confirm(`确认删除${this.select.name}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(() => {
                    requestApi('post', 'txl/deleteDepartment', { id: this.select.id }).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功',
                            })
                            this.getlist()
                            this.select = {
                                id: -1,
                                name: '全公司',
                            }
                        }
                    })
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    })
                })
        },
        addDepartment(data) {
            requestApi('post', 'txl/addDepartment', data).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '添加成功',
                    })
                    this.getlist()
                    this.$refs.department.closeDialog()
                }
            })
        },
        editUser(data) {
            requestApi('post', 'txl/editUser', data).then((res) => {
                if (res.data.code == 0) {
                    this.$message({
                        type: 'success',
                        message: '编辑成功',
                    })
                    this.getuser()
                    this.$refs.user.closeDialog()
                }
            })
        },
        doOpen() {
            this.isShow = true
            this.select = {
                id: -1,
                name: '全公司',
            }
            this.selectList = []
            this.queryForm.page = 1
            this.activeName = 'department'
            this.getlist()
        },
        getlist() {
            Promise.all([requestApi('post', `txl/role`), requestApi('post', `txl/department`)]).then((res) => {
                this.roleList = res[0].data.data
                this.departmentList = res[1].data.data.reverse()
                this.getuser()
                let roleList = []
                let departmentList = []
                this.roleList.map((item) => {
                    roleList.push({
                        label: item.name,
                        value: item.id,
                    })
                })
                this.departmentList.map((item) => {
                    departmentList.push({
                        label: item.name,
                        value: item.id,
                    })
                })
                departmentList.push({
                    label: '待分配',
                    value: 0,
                })
                this.userDialog.config[0].options = departmentList
                this.userDialog.config[1].options = roleList
            })
        },
        getuser() {
            this.loading = true
            requestApi('post', `txl/user`, Object.assign(this.queryForm, { id: this.select.id, type: this.activeName })).then((res) => {
                this.userList = res.data.data.data
                this.userList.forEach((item) => {
                    item.role_name = this.roleList.find((i) => i.id === item.role_id).name
                    item.department_name = this.departmentList.find((i) => i.id === item.department_id)?.name ?? '待分配'
                    if (!item.department_id) {
                        item.department_id = 0
                    }
                })
                this.total = res.data.data.total
                this.loading = false
            })
        },
        changePage(e) {
            this.queryForm.page = e
            this.getuser()
        },
        change(item) {
            this.queryForm.page = 1
            this.select = item
            this.getuser()
        },
        handleClick() {
            this.select =
                this.activeName === 'role'
                    ? this.roleList[0]
                    : {
                          id: -1,
                          name: '全公司',
                      }
            this.queryForm.page = 1
            this.getuser()
        },
    },
    created() {},
}
</script>

<style lang="less">
.border {
    border: 1px solid rgba(73, 197, 251, 0.3);
    border-radius: 2px;
    overflow-x: auto;
}
.txl {
    .active {
        color: #409eff !important;
    }
    .text {
        height: 30px;
        line-height: 30px;
        font-size: 16px;
        color: #b2e3ff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .el-tabs__item {
        background-color: #0a3273;
        background-image: none !important;
        height: 36px;
        line-height: 36px;
        width: 100px;
        color: #007bff;
        font-size: 13px !important;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
        color: white !important;
        background-color: #007bff !important;
    }

    .eidtItem {
        width: 80%;
        margin-left: 10%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;
        position: relative;

        .el-input {
            width: 40%;
        }

        i {
            font-size: 30px;
            color: aqua;
            position: absolute;

            cursor: pointer;
        }

        .el-icon-plus {
            right: -32px;
            top: 4px;
        }

        .el-icon-minus {
            left: -32px;
            top: 4px;
        }
    }
}
</style>
